// 轮播图
function swiper() {
  var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    mousewheelControl: true,
    autoplayDisableOnInteraction: false,
    loop: true,
    autoplay: 1000,
    speed: 800
  })
}

// 猜你喜欢

// 一、获取商品栏
const lis = document.querySelector('.list_con')
// 二、获取搜索栏
const search = document.querySelector('.search p')
// 三、轮播图
const imgBanner = document.querySelector('.swiper-wrapper')
// 搜索框

// 商品的渲染
// 1.获取后台数据
function getData() {
  axios
    .get('/page/detail', { params: { pageId: '0' } })
    .then(({ data: res }) => {
      console.log(res.data.pageData.items[6])
      // console.log(res.data.pageData.items[4].data[0].imgUrl)
      // 解构
      // const {
      //   data: {
      //     pageData: { items }
      //   }
      // } = res
      // const { data } = items[6]
      // console.log(data)
      // arr.push(data[1])
      // 一.商品渲染
      renderItem(res.data.pageData.items[6].data)
      // 二、搜索框的调用
      search.innerHTML = res.data.pageData.items[0].params.placeholder
      // 三、轮播图
      renderBanner(res.data.pageData.items[1].data)
      // 四、公告
      document.querySelector('.run .text').innerHTML =
        res.data.pageData.items[2].params.text
      // 五、导航组
      renderNav(res.data.pageData.items[3].data)
      // 六、广告
      document.querySelector('.ad img').src =
        res.data.pageData.items[4].data[0].imgUrl
    })
}
getData()

// 一、渲染商品
function renderItem(arr) {
  let str = ''
  arr.forEach(ele => {
    str += `
      <div class="item" data-id='${ele.goods_id}'>
      <div class="pic">
        <a href="javascript:void(0);">
          <img
            src="${ele.goods_image}"
            alt=""
          />
        </a>
      </div>
      <div class="txt">
        <div class="goods_name ellipsis-2">
        ${ele.goods_name}
        </div>
        <div class="bottom">
          <p>已售${ele.goods_sales}件</p>
          <div class="footer">
            <div class="price_x">¥${ele.goods_price_min}</div>
            <div class="price_y">¥${ele.line_price_max}</div>
          </div>
        </div>
      </div>
    </div>
    `
    // !== '0.00' ? ele.line_price_max : ''
  })
  lis.innerHTML = str

  // 判断是否有原价价格
  const price_y = document.querySelectorAll('.price_y')
  // console.log(price_y)
  // console.log(price_y.innerHTML)
  for (let i = 0; i < price_y.length; i++) {
    // console.log(price_y[i])
    if (price_y[i].innerHTML === '¥0.00') {
      price_y[i].innerHTML = ''
    }
  }
}

// 三、轮播图
function renderBanner(arr) {
  let str = ''
  arr.forEach(ele => {
    // console.log(ele)
    str += `
    <div class="swiper-slide">
      <img
        src="${ele.imgUrl}"
        alt=""
      />
    </div>
    `
  })
  imgBanner.innerHTML = str
  swiper()
}

//五、导航组
function renderNav(arr) {
  let str = ''
  arr.forEach((ele, index) => {
    // console.log(ele)
    str += `
    <a href="javascript:void(0);" data-id='${index}'>
    <span>
      <img
        src="${ele.imgUrl}"
        alt=""
      />
    </span>
    <p>${ele.text}</p>
  </a>
    `
  })
  document.querySelector('.content').innerHTML = str

  const a_lis = document.querySelector('.content a')
  a_lis.addEventListener('click', function () {
    location.href = './classify.html'
  })
}
// 点击获取详情页信息
const lists = document.querySelector('.list_con')
lists.addEventListener('click', async function (e) {
  localStorage.setItem('goodid', e.target.closest('.item').dataset.id)
  location.href = './details.html'
})
